<template>
    <div class="tableContainer">
        <!-- <router-view name="dictGroup" class="groupView"></router-view>
        <router-view name="dictData" class="dataView"></router-view> -->
        <!-- 字典分组 -->
        <div name="dictGroup" class="groupView">
            <el-form :inline="true" :model="formInline" class="demo-form-inline" @submit.native.prevent>
                <el-form-item label="">
                    <el-input class="elInput" v-model="formInline.code" placeholder="分组编码"></el-input>
                </el-form-item>
                <el-form-item label="">
                    <el-input class="elInput" v-model="formInline.name" placeholder="分组名称"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button class="elBtn" type="primary" @click="selectDictGroup(1)">查询</el-button>
                    <el-button class="elBtn" type="primary" @click="openDialog('','',1,1)">新增</el-button>
                    <!-- <el-button class="elBtn" type="primary" @click="exportData">批量导入</el-button> -->
                    
                </el-form-item>
            </el-form>
            <el-table :data="dictGroup"  border style="width: 100%;overflow-y:auto;" max-height="88%" :highlight-current-row='true'  ref="handSelectTest_multipleTable" @selection-change="handleSelectionChange" @row-click="rowClick">
                <el-table-column type="selection" min-width="3%"></el-table-column>
                <el-table-column prop="code" label="分组编码" min-width="15%" align="center"> </el-table-column>
                <el-table-column prop="name" label="分组名称" min-width="15%" align="center"></el-table-column>
                <el-table-column prop="remark" label="备注" min-width="30%" align="center"></el-table-column>
                <el-table-column prop="op" label="操作" align="center" min-width="30%">
                    <template slot-scope="scope">
                        <el-button class="elBtn"  type="primary" size="mini" icon="edit"  @click="openDialog(scope.$index, scope.row,2,1)">修改</el-button>
                        <el-button size="mini" icon="delete" type="danger" @click="openDialog(scope.$index, scope.row,3,1)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination background 
                layout="prev, pager, next, sizes, total, jumper"
                :page-sizes="pagesizes"
                :page-size="pagesize"
                :total="totalNum"
                @current-change="changePage"
                @size-change="sizeChange"
                >
            </el-pagination>

            <!-- 对话框 -->
            <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" width="30%" center @close="clearForm(1,1)">
                <el-form :model="form" ref="form">
                    <el-form-item label="分组编码" :label-width="formLabelWidth" prop="code" :rules="{validator:this.$common.emptyValidate, trigger: 'blur'}">
                        <el-input class="elInput" v-model="form.code" autocomplete="off"></el-input>
                    </el-form-item>
                    
                    <el-form-item label="分组名称" :label-width="formLabelWidth" prop="name" :rules="{validator:this.$common.emptyValidate, trigger: 'blur'}">
                        <el-input class="elInput" v-model="form.name" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="备注" :label-width="formLabelWidth" prop="remark">
                        <el-input class="elInput" type="textarea" v-model="form.remark" autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="clearForm(1,1)">取 消</el-button>
                    <el-button class="elBtn" type="primary" @click="saveAdd(1)">确 定</el-button>
                </div>
            </el-dialog>
            <el-dialog title="提示" :visible.sync="centerDialogVisible" width="30%" center>
                <span>确定删除这条信息</span>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="centerDialogVisible = false">取 消</el-button>
                    <el-button class="elBtn" type="primary" @click="doDelete(1)">确 定</el-button>
                </span>
            </el-dialog>
        </div>

        <!-- 字典数据 -->
        <div name="dictData" class="dataView">
            <el-form :inline="true" :model="formInline2" class="demo-form-inline">
                <el-form-item label="">
                    <el-input class="elInput" v-model="formInline2.name" placeholder="字典名称"></el-input>
                </el-form-item>
                
                <el-form-item>
                    <el-button class="elBtn" type="primary" @click="selectDict()">查询</el-button>
                    <el-button class="elBtn" type="primary" @click="openDialog('','',1,2)">新增</el-button>
                </el-form-item>
            </el-form>
            <el-scrollbar style="max-height:88%;height:auto;overflow-y: auto;">
                <el-table :data="dictData" border style="width: 100%;height:100%;" >
                    <el-table-column type="index" min-width="3%" align="center"></el-table-column>
                    <el-table-column prop="code" label="分组编码" min-width="15%" align="center"> </el-table-column>
                    <el-table-column prop="name" label="字典名称" min-width="20%" align="center"></el-table-column>
                    <el-table-column prop="value" label="字典值" min-width="15%" align="center"></el-table-column>
                    <!-- <el-table-column prop="status" label="状态" min-width="20%" align="center" :formatter="statusFormat"></el-table-column> -->
                    <el-table-column prop="remark" label="备注" min-width="15%" align="center"></el-table-column>
                    <el-table-column prop="op" label="操作" align="center" min-width="30%">
                        <template slot-scope="scope">
                            <el-button class="elBtn"  type="primary" size="mini" icon="edit"  @click="openDialog(scope.$index, scope.row,2,2)">修改</el-button>
                            <el-button size="mini" icon="delete" type="danger" @click="openDialog(scope.$index, scope.row,3,2)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-scrollbar>
            
            

            <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible2" width="30%" center @close="clearForm(2,2)">
                <el-form ref="form2" :model="form2">
                    <el-form-item label="分组编码" :label-width="formLabelWidth" prop="groupCode" :rules="{validator:this.$common.emptyValidate, trigger: 'blur'}">
                        <!-- <el-input class="elInput" v-model="form2.groupCode" autocomplete="off"></el-input> -->
                        <el-select class="elInput" v-model="form2.groupCode" placeholder="请选择">
                            <el-option
                            v-for="item in dictGroupOptions"
                            :key="item.id"
                            :label="item.code"
                            :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="字典名称" :label-width="formLabelWidth" prop="name" :rules="{validator:this.$common.emptyValidate, trigger: 'blur'}">
                        <el-input class="elInput" v-model="form2.name" autocomplete="off"></el-input>
                        
                    </el-form-item>
                    <el-form-item label="字典值" :label-width="formLabelWidth" prop="value" :rules="{validator:this.$common.emptyValidate, trigger: 'blur'}">
                        <el-input class="elInput" v-model="form2.value" autocomplete="off" ></el-input>
                    </el-form-item>
                    
                    <el-form-item label="排序" :label-width="formLabelWidth" prop="sort">
                        <!-- <el-input class="elInput" v-model="form.role" autocomplete="off"></el-input>-->
                        <el-input-number v-model="form2.sort"  :min="1"  label="描述文字"></el-input-number>
                    </el-form-item>
                    <!-- <el-form-item label="状态" :label-width="formLabelWidth">
                        <el-switch v-model="dictDataStatus" active-color="#13ce66" inactive-color="#ccc"  inactive-text="无效" active-text="有效">
                        </el-switch> 
                    </el-form-item> -->
                    <el-form-item label="备注" :label-width="formLabelWidth" prop="remark">
                        <el-input class="elInput" type="textarea" v-model="form2.remark" autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="clearForm(2,2)">取 消</el-button>
                    <el-button class="elBtn" type="primary" @click="saveAdd(2)">确 定</el-button>
                </div>
            </el-dialog>
            <el-dialog title="提示" :visible.sync="centerDialogVisible2" width="30%" center>
                <span>确定删除这条信息</span>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="centerDialogVisible2 = false">取 消</el-button>
                    <el-button class="elBtn" type="primary" @click="doDelete(2)">确 定</el-button>
                </span>
            </el-dialog>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            dialogFormVisible:false, // 控制字典分组 新增/修改对话框的显示隐藏
            centerDialogVisible:false, // 控制字典分组 删除对话框的显示隐藏
            dialogFormVisible2:false, // 控制字典数据 新增/修改对话框的显示隐藏
            centerDialogVisible2:false, // 控制字典数据 删除对话框的显示隐藏
            dictGroupId:"", // 选择的分组id
            dictDataId:"", // 选择的分组id
            dictCode:"", // 字典分组编码
            dialogTitle:"新增", // 对话框标题
            pagesizes:[10,15,20,25],
            pagesize:10, // 每页显示条数
            currpage: 1, // 当前页
            totalNum:0, // 总数
            formInline: {// 查询条件
                name: '',
                code:""
            },
            formInline2: {// 查询条件
                name: '',
            },
            form: { // 新增/修改表单参数
                name: '',
                code:"",
                remark:"",
            },
            form2: { // 新增/修改表单参数
                groupCode:"",
                groupId: '',
                name:"",
                value:"",
                sort:0,
                remark:"",
                status:"1",
            },
            dictDataStatus:true,
            dictGroup: [],
            dictGroupOptions:[],
            dictData: [],
            formLabelWidth: '20%', // label宽度
            tipMsg:"",
            clientHeight:"", // 屏幕高度
            checkedDictGroup:"", // 字典数组选中的某个数据
      }
    },
    created(){
        // 获取屏幕高度
        this.clientHeight = this.$common.getClientHeight()
        this.pagesize = Math.ceil((this.clientHeight - 250)/55)
        this.pagesizes[0] = this.pagesize
        
        this.selectDictGroup(1)
        
    },
    methods:{
        // 格式化状态
        statusFormat(row, column, cellValue, index){
            if(cellValue == 1) return "正常"
            return "禁用"
        },
        // 打开对话框
        openDialog(index,row,type,type2){
            const _this = this
            // 清楚表单数据
            for(let item in this.form){
                this.form[item] = ""
            }
            // 清楚表单数据
            for(let item in this.form2){
                this.form[item] = ""
            }
            if(type2 == 1){ // 字典数组的操作
                if(type == 3){ // 删除
                    this.centerDialogVisible = true
                    this.dictGroupId = row.id
                }else if(type == 2){ // 修改
                    this.isAdd = false
                    
                    this.dictGroupId = row.id
                    this.selectById(1)
                    this.dialogTitle = "修改"
                }
                else if(type == 1){ // 新增
                    this.isAdd = true
                    this.dialogFormVisible = true
                    this.dialogTitle = "新增"
                }
            }else{ // 字典数据
                if(type == 3){ // 删除
                    this.centerDialogVisible2 = true
                    this.dictDataId = row.id
                }else if(type == 2){ // 修改
                    
                    this.dictDataId = row.id
                    this.selectById(2)
                    this.dialogTitle = "修改"
                }
                else if(type == 1){ // 新增
                    this.form2.groupId = this.checkedDictGroup.id
                    this.form2.groupCode = this.checkedDictGroup.code
                    this.dialogFormVisible2 = true
                    this.dialogTitle = "新增"
                    this.selectAllDictGroup();
                }
            }
            
            
        },
        
        // 查询所有字典分组
        selectAllDictGroup(){
            this.$api.selectAllDictGroup()
            .then(result=>{
                if(result.data.success){
                    this.dictGroupOptions = result.data.data
                }
            })
        },
        // 查询字典分组
        selectDictGroup(type){
            if(type == 1){
                const params = {
                    code:this.formInline.code,
                    name:this.formInline.name,
                    page:this.currpage,
                    limit:this.pagesize
                }
                this.$api.selectDictGroup(params)
                .then(result=>{
                    var _this = this
                    this.$common.filterLogin(result,_this,()=>{
                        if(result.data.success){
                            _this.dictGroup = result.data.data.records
                            _this.totalNum = result.data.data.total
                        }
                    })
                })
            }else{
                this.$api.selectDictBycode({params:{code:this.dictCode}})
                .then(result=>{
                    var _this = this
                    this.$common.filterLogin(result,_this,()=>{
                        if(result.data.success){
                            _this.dictData = result.data.data.list
                        }
                    })
                })
            }
            
        },
        selectDict(){
            this.$api.selectAllDict({params:{name:this.formInline2.name}})
            .then(result=>{
                console.log(result)
                if(result.data.success){
                    this.dictData = result.data.data
                }
            })
        },
        // 根据id查询
        selectById(type){
            if(type == 1){
                this.$api.selectDictGroupById(this.dictGroupId)
                .then (result => {
                    var _this = this
                    this.$common.filterLogin(result,_this,()=>{
                        if(result.data.success) {
                            _this.form = result.data.data
                            _this.dialogFormVisible = true
                        } else {
                            _this.tipMsg = result.data.message
                            this.$message({center: true,message:_this.tipMsg,type: 'warning'});
                        }
                    })
                    
                })
                .catch(err => {
                })
            }else{
                this.$api.selectDictById(this.dictDataId)
                .then (result => {
                    var _this = this
                    this.$common.filterLogin(result,_this,()=>{
                        if(result.data.success) {
                            _this.form2 = result.data.data
                            _this.form2.groupCode = result.data.data.code
                            _this.dictDataStatus = result.data.data.status == 1?true:false
                            _this.dialogFormVisible2 = true
                        } else {
                            _this.tipMsg = result.data.message
                            this.$message({center: true,message:_this.tipMsg,type: 'warning'});
                        }
                    })
                    
                })
                .catch(err => {
                })
            }
            
        },
        // 保存
        saveAdd(type){
            // 数据字典组
            if(type == 1){
                this.$refs['form'].validate((valid) => {
                    if(valid){
                        if(!this.form.id){ // 新增
                            this.$api.addDictGroup(this.form).then(result=>{
                                this.successFun(result,1,1)
                            })
                        }else{ // 修改
                            this.$api.updateDictGroup(this.form)
                            .then(result=>{
                                this.successFun(result,2,1)
                            })
                        }
                    }
                })
                
            }else{
                this.$refs['form2'].validate((valid) => {
                    if(valid){
                        this.form2.groupId = this.checkedDictGroup.id
                        this.form2.groupCode = this.checkedDictGroup.code
                        this.form2.status = this.dictDataStatus?1:0
                        if(!this.form2.id){ // 新增
                            // this.form2.groupId = this.form2.groupCode
                            this.$api.addDict(this.form2).then(result=>{
                                this.successFun(result,1,2)
                                
                            })
                        }else{ // 修改
                            this.$api.updateDict(this.form2)
                            .then(result=>{
                                this.successFun(result,2,2)
                            })
                        }
                    }
                })
                
            }
            
            
        },
        // 删除权限信息
        doDelete(type){
            if(type == 1){
                const ids = []
                ids.push(this.dictGroupId)
                this.$api.deleteDictGroup({ids:ids})
                .then(result=>{
                    this.successFun(result,3,1)
                })
            }else{
                this.$api.deleteDict(this.dictDataId)
                .then(result=>{
                    this.successFun(result,3,2)
                })
            }
            
        },
        // 接口调用成功的方法
        successFun(result,type,type2){
            var _this = this
            this.$common.filterLogin(result,_this,()=>{
                _this.tipMsg = result.data.message
                var _this2 = _this
                this.clearForm(type,type2)
                if(type2 == 1){
                    _this.selectDictGroup(1) 
                    _this.centerDialogVisible = false
                    _this.dialogFormVisible = false 

                   
                }else{
                    // 根据code查询
                    if(_this.dictCode){
                        _this.selectDictGroup(2) 
                    }else{ // 根据名称查询
                        _this.selectDict()
                    }
                    _this.centerDialogVisible2 = false
                    _this.dialogFormVisible2 = false

                }
                
                if(result.data.success){
                    _this.$message({center: true,message:_this.tipMsg?_this.tipMsg:"操作成功",type: 'success'});
                }else{
                    this.$message({center: true,message: result.data.message?result.data.message:"网络错误,请稍后再试",type: 'warning'});
                }
                
            })
            
        },
        // 清空表单
        clearForm(type1,type2){
            this.dialogFormVisible = false
            this.dialogFormVisible2 = false
            var _this = this
            // 清楚表单数据
            for(let item in this.form){
                this.form[item] = ""
            }
            // 清楚表单数据
            for(let item in this.form2){
                this.form2[item] = ""
            }
            // this.form2.
            // 删除状态不清除表单验证
            if(type1 != 3){
                (type2 ==1)?this.$refs['form'].clearValidate():this.$refs['form2'].clearValidate()
                // (type2 ==2)?this.$refs['form2'].clearValidate():""
            }
            
        },
        //点击复选框触发，复选框样式的改变
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        // 表格某行被点击时触发
        rowClick(row, column, event){
            this.dictCode = row.code
            this.$refs.handSelectTest_multipleTable.clearSelection();
            this.$refs.handSelectTest_multipleTable.toggleRowSelection(row);
            this.selectDictGroup(2)
            
            this.checkedDictGroup = row
        },
        // 分页--改变当前页
        changePage(index){
            this.currpage = index
            this.selectDictGroup(1)
        },
        // 分页--改变当前页显示条数
        sizeChange(page){
            this.pagesize = page
            this.selectDictGroup(1)
        }
        
    },
}
</script>

<style lang="scss" scoped>
.tableContainer{
    display: flex;
    height: 97%;
    padding: 10px;
    background: #FDFDFD;
    border-radius: 5px;
    justify-content:space-between;
    .groupView{
        width: 50%;
    }
    .dataView{
        width: 48%;
    }
    .el-pagination{
        text-align: right;
        margin-top:20px;
    }
    .el-scrollbar__wrap {
        overflow-x: hidden;
        height: 88%;
    }
}
</style>